<template>
  <div class="app">
    <div class="tag-container">
      <h4>四川川煤华荣能源股份有限公司新维煤矿</h4>
      <el-tag
        v-for="(page, index) in pages"
        :key="index"
        :type="activeIndex === String(index) ? '' : 'info'"
        @click="handleSelect(String(index))"
        style="cursor: pointer; margin-right: 10px"
      >
        {{ page.title }}
      </el-tag>
    </div>
    <LevelOnePage
      v-if="currentPage"
      :page="currentPage"
      :initialSubPageIndex="initialSubPageIndex"
    />
  </div>
</template>

<script>
import LevelOnePage from "../../../components/Test20250626/LevelOnePage.vue";

export default {
  name: "App",
  components: {
    LevelOnePage,
  },
  data() {
    return {
      activeIndex: "0",
      initialSubPageIndex: "0",
      pages: [
        { title: "运输系统", subPages: [] },
        { title: "排水系统", subPages: ["水泵房"] },
        { title: "通风系统", subPages: ["主扇", "局扇"] },
        { title: "压风系统", subPages: ["压风机房"] },
        { title: "供配电", subPages: ["中央变电所", "地面变电所"] },
        // { title: "视频监控", subPages: ["全部", "在线", "中断"] },
        { title: "视频监控", subPages: ["全部"] },
        { title: "报警/运行/通讯", subPages: [] },
      ],
      currentPage: null,
    };
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
      this.initialSubPageIndex = "0"; // 默认选择第一个二级页面
      this.currentPage = this.pages[key];
    },
  },
  created() {
    this.handleSelect("0"); // 初始化时选择第一个一级页面
  },
};
</script>

<style>
body,
html {
  margin: 0;
  padding: 0;
  overflow: hidden; /* 禁用全局滚动条 */
}

.app {
  margin-left: 20px;
  margin-top: 20px;
  height: 88vh; /* 使应用占据整个视口高度 */
  display: flex;
  flex-direction: column;
}

.tag-container {
  margin-bottom: 20px;
}
</style>



